import React, {useState, useEffect, memo} from 'react'
import {history} from 'umi'
import {ShowLoading} from '@/components'

function Hot(props) {

  const handleClick = (id) => {
    history.push({
      pathname: '/house/house',
      query: {
        id
      }
    })
  }

  return (
    <div className='hot'>
      <h1>民宿首页</h1>
      <div className='hot-lists'>
        {props?.house?.map(item => (
          <div key={item.id} className='hot-lists-item' onClick={() => {
            handleClick(item.id)
          }}>
            <img src={item.houseInfoPictures ? item?.houseInfoPictures.split('|')[0] : require('@/assets/blank.png')}
                 className='img'/>
            <div className='title'>{item.name}</div>
            <div className='info'>{item.address}</div>
            <div className='price'>{item.rent}元/月</div>
          </div>
        ))}
      </div>
      <ShowLoading showLoading={props?.showLoading}/>
    </div>
  )
}

export default memo(Hot)
